
let list = document.querySelector('#list')
let str = ''

fetch('http://chst.vip:1234/api/getbaicaijiatitle')
    .then(body => body.json())
    .then(res => {
        let r = res.result;
        console.log(r);
        let div = document.createElement('div')
        $(div).attr('id', 'box')
        r.forEach(item => {
            str += `<div titleId=${item.titleId}>${item.title}</div>`
        });
        list.innerHTML = str
    })

//请求详情信息
let main = document.querySelector('#main')
fetch('http://chst.vip:1234/api/getbaicaijiaproduct?titleid=0')
    .then(body => body.json())
    .then(res => {
        let r = res.result;
        console.log(r);
        r.forEach(item => {
            let p = document.createElement('p')
            p.innerHTML = `<div>${item.productImg}</div>
                            <div class="f1">
                                <span>${item.productName}</span>
                                <span>${item.productPrice}</span>
                                <span class="f2">${item.productCouponRemain}</span>
                                <span>${item.productCoupon}</span>
                                <span>${item.productHref}</span>
                            </div>
                            `
            main.appendChild(p)
            changeText()
            changeNumber()
        });

    })
$('#list').on('click', 'div', function () {
    $('#main').html('')
    $(this).css('color', 'red').siblings().css('color', 'black')
    let id = $(this).attr('titleid')
    console.log(id);
    fetch(`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${id}`)
        .then(body => body.json())
        .then(res => {
            let r = res.result;
            // console.log(r);
            r.forEach(item => {
                let p = document.createElement('p')
                p.innerHTML = `<div>${item.productImg}</div>
                            <div class="f1">
                                <span>${item.productName}</span>
                                <span>${item.productPrice}</span>
                                <span class="f2">${item.productCouponRemain}</span>
                                <span>${item.productCoupon}</span>
                                <span>${item.productHref}</span>
                            </div>
                            `
                main.appendChild(p)
                changeText()
                changeNumber()
            });

        })
})

function changeText() {
    //进度条动画
    $('.f1>.f2>.bar>i').animate({
        width: 120,
    }, 4000)

    //改变数字
    let i = 0
    let str = ''
    let timer = setInterval(function () {
        str = `${i++}%`
        $('.f1>.f2>.bar>i').text(str)
        if (i == 101) {
            clearInterval(timer)
        }
    }, 40)
}

function changeNumber() {
    let n = 0;
    let str1 = ''
    let str2 = ''
    let timer2 = setInterval(function () {
        str1 = `${n++}`
        str2 = 126 - str1
        $('.f1>.f2>.bar>b').text(`已领${str1}张/剩余${str2}张`)
        if (n == 127) {
            clearInterval(timer2)
        }
    }, 30)
}

